<template>
	<view class="page">

		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">

		</view>
		<!-- #endif -->
		<!-- <uni-nav-bar title="导航栏组件"></uni-nav-bar> -->
		<view class="nav-bar">
			<view class="navbarText">
				<!-- {{navbarText}} -->
				<image src="/static/img/index/navimg.png" mode="heightFix"></image>
			</view>
			<view class="nav-bar-img">
				<view class="nav-bar-img-box">
					<image src="/static/img/headphone@2x.png" mode="widthFix"></image>
				</view>
				<view class="nav-bar-img-box" style="margin-left: 15px;">
					<image src="/static/img/message@2x.png" mode="widthFix" @click="toxiaoxi"></image>
				</view>

			</view>
		</view>
		<view class="">
			<!-- 轮播图 -->
			<view class="index-concent-item">
				<u-swiper name="imgUrl" :list="bannerlistTow" mode="dot" indicator-pos="bottomCenter"
					@click="swiperclick"></u-swiper>
			</view>
		<!-- 	<view class="index-concent-item">
				<u-swiper name="imgUrl" :list="bannerlist" mode="dot" indicator-pos="bottomCenter"></u-swiper>
			</view> -->
			<view :class="[moduleList.length<=4?'product':'product_lists']">
				<view class="product_list" v-for="(item,index) in moduleList" @click="navigateList(item)" v-if=" item.iosClass !== 'MAPhoneBookViewController' && isTest ">
					<view>
						<image :src="item.imgUrl" mode=""></image>
					</view>
					<!-- #ifdef APP-PLUS -->
					<u-badge v-if="item.iosClass == 'SDTSIntegralViewController' && integralGoodOrderListSize > 0" size="mini"  class="badge" count="待处理"></u-badge>
					<!-- #endif --> 
					<view class="product_list-name">{{item.name}}</view>
				</view>
				<view class="product_list" v-for="(item,index) in moduleList" @click="navigateList(item)" v-if="!isTest">
					<view>
						<image :src="item.imgUrl" mode=""></image>
					</view>
					<!-- #ifdef APP-PLUS -->
					<u-badge v-if="item.iosClass == 'SDTSIntegralViewController' && integralGoodOrderListSize > 0" size="mini"  class="badge" count="待处理"></u-badge>
					<!-- #endif --> 
					<view class="product_list-name">{{item.name}}</view>
				</view>
			</view>

			<!-- 轮播图 -->
		<!-- 	<view class="index-concent-item">
				<u-swiper name="imgUrl" :list="bannerlistTow" mode="dot" indicator-pos="bottomCenter"
					@click="swiperclick"></u-swiper>
			</view> -->
			<!-- <view class="tongzhi">
				<view class="tongzhi-img">
					<image src="/static/img/index/ic_notice.png" mode=""></image>
				</view>
				<view class="notil-concent">
					<swiper class="list" circular="true" vertical="true" autoplay="true" interval="2000" duration="1000"
						@click="toPlatformAnn">
						<swiper-item v-for="item in records" :key="item.id" @click="handleInfo(item.id)"
							class="item-item">
							<view class="">
								{{ item.title }}
							</view>
							<view class="">
								{{ item.content }}

							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="tongzhi-rightimg">
					<image src="/static/img/index/ic_next_white1.png" mode=""></image>
				</view>
			</view> -->

			<view class="" style="height: 2px;background-color: #F8F8F8; ">

			</view>
			<view class="sdsadasdwqdwq" v-if="!isTest">
				<view class="dayAndmonth">
					<view class="dayAndmonth-left">
						{{AmtInfo.title}}
					</view>
					<view class="dayAndmonth-right">
						<view v-for="(item, index)  in storeList" :key="index" :class="[type==item.id?'sel':'nosel']"
							@click="typeofs(item)">
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="InfoAmt" >
					<view class="InfoAmt-item" style="margin-left: 0px;">
						<view class="InfoAmt-item-amt">
							{{number.parsePrice(AmtInfo.teamAmt)}}
						</view>
						<view class="InfoAmt-item-title">

							<view class="InfoAmt-item-title-text">
								团队交易量（元）
							</view>
						</view>

					</view>
					<view class="InfoAmt-item">
						<view class="InfoAmt-item-amt">
							{{number.parsePrice(AmtInfo.myAmt)}}
						</view>
						<view class="InfoAmt-item-title">

							<view class="InfoAmt-item-title-text">
								个人交易量（元）
							</view>
						</view>

					</view>
				</view>
				<view class="InfoAmt" v-if="!isTest">
					<view class="InfoAmt-item" style="margin-left: 0px;">
						<view class="InfoAmt-item-amt">
							{{AmtInfo.teamMer}}
						</view>
						<view class="InfoAmt-item-title">

							<view class="InfoAmt-item-title-text">
								团队激活商户
							</view>
						</view>

					</view>
					<view class="InfoAmt-item">
						<view class="InfoAmt-item-amt">
							{{AmtInfo.myMer}}
						</view>
						<view class="InfoAmt-item-title">

							<view class="InfoAmt-item-title-text">
								个人激活商户
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- <view class="horizontal"> -->
				<!--      <view class="horizontal-item">
          <view class="horizontal-item-number">

            {{AmtInfo.teamPartner}}
          </view>
          <view class="horizontal-item-text">
            团队新增伙伴
          </view>
        </view>
		
       <view class="horizontal-item">
          <view class="horizontal-item-number">
            {{AmtInfo.teamBind}}
          </view>
          <view class="horizontal-item-text">
            团队绑定设备
          </view>
        </view> -->
				<!-- <view class="horizontal-item">
					<view class="horizontal-item-number">
						{{AmtInfo.teamMer}}
					</view>
					<view class="horizontal-item-text">
						团队激活商户
					</view>
				</view>
				<view class="horizontal-item">
					<view class="horizontal-item-number">
						{{AmtInfo.myMer}}
					</view>
					<view class="horizontal-item-text">
						个人激活商户
					</view>
				</view> -->
			<!-- </view> -->
			<!--  <view class="horizontal">
       <view class="horizontal-item">
          <view class="horizontal-item-number">

            {{AmtInfo.myPartner}}
          </view>
          <view class="horizontal-item-text">
            个人新增伙伴
          </view>
        </view>
       <view class="horizontal-item">
          <view class="horizontal-item-number">
            {{AmtInfo.myBind}}
          </view>
          <view class="horizontal-item-text">
            个人绑定设备
          </view>
        </view>
       <view class="horizontal-item">
          <view class="horizontal-item-number">
            {{AmtInfo.myMer}}
          </view>
          <view class="horizontal-item-text">
            个人激活商户
          </view>
        </view>
      </view> -->
			<!-- <u-button @click="logoin">按钮</u-button> -->
			<view class="Funman-concent" v-if="!isTest">
				<view v-for="item of funmanMenus" :class="['Funman-' + item.type,'Funman-mang']"
					@click="topage(item.type)">
					<view class="">
						<view class="material-title">
							{{item.Menusname}}
						</view>
						<view class="material-des">
							{{item.promid}}
						</view>
					</view>
					<view class="Funman-mang-img" @click="topage(item.type)">
						<image :src="item.img" mode=""></image>
					</view>
				</view>
				<view class="" style="height: 24rpx;width: 100%;">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import checkVersion from '@/pages/lq-upgrade/checkVersion.js'
	import number from '../../utils/number.js'
	const api = require('../../config/api')
	const util = require('../../utils/util')
	export default {
		data() {
			return {
						isTest: null,
				number: number, //声明number属性并赋值为引入的number模块
				title: 'Hello',
				navbarText: '',
				bannerlist: [], //轮播图
				bannerlistTow: [], //轮播图2
				moduleList: [], //菜单按钮
				integralGoodOrderListSize:0,
				records: [],
				storeList: [{
						id: 0,
						name: '本日'
					},
					{
						id: 1,
						name: '本月'
					}
				],
				type: '0',
				AmtInfo: {},
				loginForm: {
					// passwd: "17753422520",
					// phone: "18453511319",
					passwd: '17753422520',
					phone: '13603543256',
					tenantId: '3'
				},
				funmanMenus: [{
						Menusname: '办理信用卡',
						type: 'xyk',
						promid: '免费办理信用卡',
						img: '../../static/img/index/Frame@2x.png',

					},
					{
						Menusname: '商学院讲堂',
						type: 'ssy',
						promid: '常见问题介绍',
						img: '../../static/img/index/Frame@2x(1).png',

					}
				]
			}
		},
		onLoad() {
			this.upadetaApp();
		},
		onShow() {
			this.isTest = uni.getStorageSync('isTest')
			this.getUserInfo();
			this.getIndexinfo()
			this.getNoticeList()
			this.getInfoAmt()
		},
		methods: {
			topage(e) {
				// console.log(e);
				// let e = ss
				if (e == 'xyk') {
					// this.toAddMer()
					uni.showToast({
						title: '正在开发',
						icon: 'none'
					})
				} else if (e == 'ssy') {
					uni.navigateTo({
						url: '/pages/BusinessSchool/BusinessSchool'
					})
				}
			},
			swiperclick(e) {
				console.log(e);

				if (this.bannerlistTow[e].targetUrl) {

					let targetUrl = this.bannerlistTow[e].targetUrl
					console.log(targetUrl);
					uni.navigateTo({
						url: '/pages/indexChild/webview?contractUrl=' + targetUrl
					});
				} else {

				}

			},
			// 版本更新
			upadetaApp() {
				this.upgrade()
			},
			async upgrade() {
				let platform = uni.getSystemInfoSync().platform //手机平台
				let PHtype
				if (platform === 'android') {
					PHtype = "1"

				}
				//IOS无法在线升级提示到商店下载
				else {
					PHtype = "0"
				}
				const serverVersion = await util.request(api.appVersionUrl + '/' + '3' + '/' + PHtype, {

				}, 'POST');
				// console.log(serverVersion);
				if (serverVersion.code == 0) {
					let name = serverVersion.data.versionName; //新版本名称
					let code = serverVersion.data.versionNo; //新版本号（数字）
					let content = serverVersion.data.versionDesc; //更新内容
					let url = serverVersion.data.downloadUrl; //app下载链接，（演示请换成真正在下载链接）
					let forceUpdate; // 是否强制更新，初始化为undefined

					// 判断是否需要强制更新  
					if (serverVersion.data.upgrade == 1) {
						forceUpdate = true;
					} else {
						forceUpdate = false;
					}
					const upgradeResult = checkVersion({
						name, //最新版本名称
						code, //最新版本号
						content, //更新内容
						url, //下载链接
						forceUpdate //是否强制升级           
					})
					if (upgradeResult === false) {
						uni.hideLoading()

						setTimeout(() => {
							// uni.showToast({
							// 	title: '已是最新版本',
							// 	icon: 'none'
							// });
						}, 30)
					} else {
						uni.hideLoading()
					}
				} else {
					// uni.showToast({
					// 	title: "检查更新失败",
					// 	icon: "none"
					// })
				}
			},
			toxiaoxi() {
				uni.navigateTo({
					url: '/pages/notice/noticeCenter'
				})
			},
			async getUserInfo() {
				const res = await util.request(
					api.getUserInfoUrl, {

					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					// this.UserInfo = res.data
					// this.navbarText = res.data.user.userName + '，欢迎来到卡拉灵动'
					this.navbarText = '卡拉灵动'
				}
			},
			toPlatformAnn() {},
			// logoin() {
			//   this.handleLogin()
			//   uni.navigateTo({
			//     url: '/pages/terminalSwitch/terminalSwitch'
			//   })
			// },
			// 登录
			async handleLogin() {
				const res = await util.request(
					api.LoginUrl, {
						passwd: this.loginForm.passwd,
						phone: this.loginForm.phone,
						tenantId: this.loginForm.tenantId
					},
					'POST'
				)
				// console.log(res)
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					uni.setStorageSync('token', res.data.token)
					this.getIndexinfo()
					this.getNoticeList()
					this.getInfoAmt()
				}
			},

			// 修改规格
			typeofs(item) {
				// console.log(item)
				// 激活样式是当前点击的对应下标--list中对应id
				this.type = item.id
				// 可以根据点击事件改变内容
				this.getInfoAmt()
				uni.showLoading({
					title: '',
					mask: true
				})
			},

			navigateList(item) {
				if (item.iosClass == 'MAGoodsListViewController') {
					uni.navigateTo({
						url: '/pages/indexChild/GoodsList/GoodsList'
					})
				} else if (item.iosClass == 'SDTSIntegralViewController') {
					uni.navigateTo({
						url: '/pages/indexChild/Redeem/Redeem'
					})
				} else if (item.iosClass == 'MAPhoneBookViewController') {
					uni.navigateTo({
						url: '/pages/myAgent/myAgent'
					})
				} else if (item.iosClass == 'MATrainingViewController') {
					uni.navigateTo({
						url: '/pages/BusinessSchool/BusinessSchool'
					})
				} else if (item.iosClass == 'MAMerListViewController') {
					uni.navigateTo({
						url: '/pages/myMer/merchantManage'
					})
				} else if (item.iosClass == 'SDTSMachinerySetViewController') {
					uni.navigateTo({
						url: '/pages/myEquipment/myEquipment'
					})
				} else if (item.iosClass == 'HKMachinerySwitchViewController') {
					uni.navigateTo({
						url: '/pages/terminalSwitch/terminalSwitch'
					})
				} else if (item.iosClass == 'MAProfitViewController') {
					uni.navigateTo({
						url: '/pages/marketingPoster/marketingPoster'
					})
				} else if (item.iosClass == 'HKFenHongViewController') {
					uni.navigateTo({
						url: '/pages/dividend/dividend'
					})
				}
			},
			async getIndexinfo() {
				const res = await util.request(api.indexInfoUrl, {}, 'POST')
				// console.log(res)
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					this.bannerlist = res.data.imgList
					this.bannerlistTow = res.data.img2List
					this.moduleList = res.data.module
					this.integralGoodOrderListSize = res.data.integralGoodOrderListSize
				}
			},

			async getNoticeList() {
				const res = await util.request(
					api.noticeListUrl, {
						limit: 10,
						// "page": 1,
						type: '0'
					},
					'POST'
				)
				// console.log(res);
				if (res.code !== 0) {} else {
					this.records = res.data.records
				}
			},
			async getInfoAmt() {
				const res = await util.request(api.infoAmtUrl + '/' + this.type, {}, 'POST')
				// console.log(res)
				if (res.code !== 0) {
					uni.hideLoading({})
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					uni.hideLoading({})
					this.AmtInfo = res.data
					// this.records = res.data.records
				}
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
<style lang="scss" scoped>
	.page {
		// background-color: #F7F7F7;
		// height: 100%;
		background-image: url(../../static/indexbg.jpg);
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.nav-bar {
		font-size: 20px;
		color: #333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: 600;
		padding: 5px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		// background: linear-gradient(to right, #9CB8CC, #DEEFFA);
		// border-top: solid 1px #333;
	}

	.navbarText {
		width: 260px;
		height: 25px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.index-concent-item {
		// width: 90%;
		// margin: 15rpx auto;
		margin: 15rpx 10px;
		padding: 15rpx 0;
	}

	.product {
		display: flex;
		flex-wrap: wrap;
		margin: 40rpx 0;
	}

	.product_lists {
		display: flex;
		flex-wrap: wrap;
		margin: 0rpx 24rpx 0 24rpx;

		padding: 32rpx 24rpx;
		border-radius: 16rpx;
		border: 2rpx solid #FFF;
		background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(180deg, #F4F5F8 0%, #FEFEFE 100%);
	}

	.product_list {
		position: relative;
		width: 25%;
		margin: 10rpx 0;

		image {
			width: 95rpx;
			height: 95rpx;
		}
	}

	.product_list>view {
		display: flex;
		justify-content: center;
		text-align: center;
		font-size: 26rpx;
		padding: 6rpx 0;
	}

	.tongzhi {
		display: flex;
		align-items: center;
		height: 55px;
		background-image: linear-gradient(to bottom, #4186ed, #0cb9fb);
		padding: 0 15px;

		.tongzhi-img {
			width: 38px;
			height: 33px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.notil-concent {
			flex: 1;
			font-size: 12px;
			color: #fff;
			margin-left: 20px;
		}

		.notil-concent .list {
			height: 55px;
			font-size: 12px;
			// line-height: 55px;
			// margin-left: 20px;
		}

		.item-item {
			display: flex;
			flex-direction: column;
			// align-items: center;
			justify-content: center;

			view {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}

		.tongzhi-rightimg {
			width: 10px;
			height: 16px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}


	.horizontal {
		display: flex;
		margin-top: 15px;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-left: 20px;

		.horizontal-item {
			width: 33%;

			.horizontal-item-number {
				font-family: 600;
				text-align: center;
				font-size: 20px;
				color: #fe9940;
			}

			.horizontal-item-text {
				color: #000;
				margin-top: 5px;
				text-align: center;
				font-size: 15px;
			}
		}
	}

	.nav-bar-img {
		display: flex;
		align-items: center;


		.nav-bar-img-box {
			display: flex;
			width: 35px;
			height: 35px;
			// padding: 10px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			border-radius: 999px;
			// background: #FFF;

			image {
				width: 25px;
				height: 30px;
			}
		}
	}

	.Funman-concent {
	margin: 0rpx 24rpx 24rpx 24rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;

		.Funman-mang:nth-child(odd) {
			margin-right: 22rpx;
		}

		.Funman-mang {
			background-color: #fff;
			// width: 45%;
			flex: 1;

			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 6px;
			background: #FFF;
			padding: 12px;
			display: flex;
			padding: 24rpx;
			justify-content: space-between;
			align-items: center;
			flex-shrink: 0;
			border-radius: 12rpx;
			background: #FFF;

			.Funman-mang-img {
				width: 88rpx;
				height: 88rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.material-title {
				
				color: #414960;
				 text-align: center;
				 font-family: "PingFang SC";
				 font-size: 28rpx;
				 font-style: normal;
				 font-weight: 600;
				 line-height: 44rpx;
			}

			.material-des {
				margin-top: 4rpx;
				 color: #61687c;
				 font-family: "PingFang SC";
				 font-size: 22rpx;
				 font-style: normal;
				 font-weight: 400;
				 line-height: 40rpx;
			}


		}

	}

	.sdsadasdwqdwq {
		display: flex;
		margin: 20rpx 24rpx;
		padding: 32rpx;
		flex-direction: column;
		align-items: center;
		gap: 24rpx;
		border-radius: 16rpx;
		background: #FFF;

	}

	.sdsadasdwqdwq>view {
		width: 100%;
	}

	.dayAndmonth {

		height: 35px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.dayAndmonth-left {
			flex: 1 0 0;
			color: #171b25;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 44rpx;
		}

		.dayAndmonth-right {
			display: flex;
			padding: 4rpx 8rpx;
			justify-content: center;
			align-items: center;
			gap: 4rpx;
			border-radius: 12rpx;
			background: var(-----color-fill-4, #F1F2F5);
		}

		.sel {
			font-weight: 600;
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			border-radius: 8rpx;
			color: #ffffff;
			border: 1rpx solid #0000000a;
			// background: #FFF;
			background-image: linear-gradient(to bottom, #2D78FD, #0cb9fb);
			// box-shadow: 0 6rpx 16rpx 0 #0000001f, 0 6rpx 2rpx 0 #0000000a;
		}

		.nosel {
			color: #61687c;
			display: flex;
			padding: 0 20rpx;
			align-items: center;
			justify-content: center;
			border-radius: 8rpx;
			//border: 1rpx solid #0000000a;

		}
	}

	.InfoAmt {
		display: flex;
		padding: 1rpx;
		// padding-left: 20px;

		.InfoAmt-item {
			margin-left: 22rpx;
			// flex: 1;
			display: flex;
			padding: 24rpx;
			flex-direction: column;
			align-items: flex-start;
			flex: 1 0 0;
			border-radius: 12rpx;
			background: var(--Color-Fill-Fill-5, #FAFAFB);

			.InfoAmt-item-title {
				display: flex;
				align-items: center;

				.InfoAmt-item-title-yuan {
					width: 10px;
					height: 10px;
					border-radius: 50%;
					border: solid 3px #6a9ffb;
				}

				.InfoAmt-item-title-text {
				color: #414960;
				 text-align: center;
				 font-family: "PingFang SC";
				 font-size: 24rpx;
				 font-style: normal;
				 font-weight: 400;
				 line-height: 40rpx;
				}
			}

			.InfoAmt-item-amt {
				font-weight: 600;
				color: #2D78FD;
				 text-align: center;
				 font-family: "Altinn-DIN Exp";
				 font-size: 42rpx;
				 font-style: normal;
				 font-weight: 600;
				 line-height: 48rpx;
			}
		}
	}
	.product_list-name{
		color: #414960;
		 text-align: center;
		 font-family: "PingFang SC";
		 font-size: 24rpx;
		 font-style: normal;
		 font-weight: 600;
		 line-height: 40rpx;
	}
	.badge {
			width: 80rpx;
			height: 30rpx;
			margin-top: -10rpx;
			margin-right: -10rpx;
		}
</style>